<template>
    <div id="filter-header">
        <h3>过滤器</h3>
    </div>
    <div id="filter-container">
        <div id="lab-picker">
            <label>选择类别</label>
            <el-select v-model="tag" class="m-2" placeholder="选择实验室类别" size="large">
            <el-option
                v-for="item in tags"
                :key="item.tag"
                :label="item.tag"
                :value="item.tag"
            />
        </el-select>
        </div>
        <div id="lab-picker">
            <label>实验室号</label>
            <el-input style="margin-left:15px" v-model="lab_id" type="number" placeholder="请输入实验室Id"></el-input>
        </div>
        <div id="time-picker">
            <label>
                选择日期
            </label>
            <el-date-picker
            v-model="queryDate"
            type="date"
            placeholder="Pick a Date"
            />
            <el-button type="primary" style="margin-left:20px" @click="searchLab">
                检索
            </el-button>
        </div>
    </div>
    <div id="result-area">
        <el-table :data="queryResult" 
                style="width: 100%"
                >
                <el-table-column prop="id" label="ID" width="80"/>
                <el-table-column prop="tag" label="类型" width="120" />
                <el-table-column prop="label" label="实验室名称" width="120" />
                <el-table-column prop="size" label="容量" width="100" />
                <el-table-column prop="function" label="功能" width="280" />
                <el-table-column label="实验室详情" width="100" >
                    <template #default="scope">
                        <el-button @click="gotoLabDetail(scope.row.id)" type="info">前往</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="orderList" label="已被预订时间" width="300"/>
                <el-table-column label="选择预定" width="100" >
                    <template #default="scope">
                        <el-button @click="gotoOrder(scope.$index)" type="info">预定</el-button>
                    </template>
                </el-table-column>
        </el-table>
    </div>

    <div :class='`message-box-background ${isStartOrder && "message-box-selected"}`' >
            <div class="message-box">
                <h4>预约实验室</h4>
                <el-form-item label="起始时间">
                    <el-time-picker
                        v-model="startTime"
                        arrow-control
                        placeholder="选择起始时间"
                        />
                </el-form-item>
                <el-form-item label="终止时间">
                    <el-time-picker
                        v-model="endTime"
                        arrow-control
                        placeholder="选择终止时间"
                    />
                </el-form-item>
                <el-form-item label="填写预约原因">
                    <el-input type="textarea" placeholder="预约原因..." v-model="description"/>
                </el-form-item>
                <el-button type="primary" @click="submitOrderRequest()">提交</el-button>
                <el-button  type="info" @click="exit()">退出</el-button>  

            </div>
        </div>
</template>

<script>
import axios from "axios"
import { ElMessage } from "element-plus"
export default {
    data(){
        return {
            isStartOrder:false,
            queryDate: new Date(),
            labIndex:null,
            lab_id:null,
            startTime:null,
            endTime:null,
            tags:[],
            description:null,
            tag:null,
            queryResult:[]
        }
    },
    methods:{
        gotoOrder(index){
            this.labIndex = index 
            this.isStartOrder = true
        },
        exit(){
            this.isStartOrder = false;
        },
        gotoLabDetail(id){
            this.$router.push("/index/labDetail/"+id)
        },
        submitOrderRequest(){


            if(this.startTime == null || this.endTime == null){
                ElMessage.error("请选择时间")
                return
            }
            if(this.startTime.getHours() < 8 || this.startTime.getHours() > 21 || this.endTime.getHours() < 8 || this.endTime.getHours() > 21){
                ElMessage.error("时间范围有误,仅可选择8：00 - 21：59时间段内时间！")
                return
            }

            console.log(this.queryDate.getFullYear() + "-" + (this.queryDate.getMonth()+1) + "-" + this.queryDate.getDate() + 
            " " + this.endTime.getHours() + ":" + this.endTime.getMinutes() + ":" + this.endTime.getSeconds())

            let start = new Date(
                this.queryDate.getFullYear() + "-" + (this.queryDate.getMonth()+1) + "-" + this.queryDate.getDate() + 
            " " + this.startTime.getHours() + ":" + this.startTime.getMinutes() + ":" + this.startTime.getSeconds()
            )
            let end = new Date(
                this.queryDate.getFullYear() + "-" + (this.queryDate.getMonth()+1) + "-" + this.queryDate.getDate() + 
            " " + this.endTime.getHours() + ":" + this.endTime.getMinutes() + ":" + this.endTime.getSeconds()
            )
        
            console.log("labIndex",this.labIndex)
            console.log(start,end,this.queryResult[this.labIndex])

            axios.post("/order/create", {"start":start,
            "end":end,
            "lab_id":this.queryResult[this.labIndex].id,
            "description":this.description}).then((res)=>{
                console.log(res)
                if(res.data.code != 0){
                    ElMessage.error("code:"+res.data.code+",message:"+res.data.msg)
                }else{
                    ElMessage({
                        "message":"预约成功",
                        "type":"success"
                    })
                    this.exit()
                }
            })
        },
        searchLab(){
            
            if(this.lab_id == null){
                if(this.tag == null){
                    ElMessage.error("请选择实验室类别")
                    return
                }
                axios.post("/lab/queryByTagAndDate",{"date":new Date(this.queryDate.getFullYear() + "-" + (this.queryDate.getMonth()+1) + "-" + 
                this.queryDate.getDate() + " " + "00:00:00")
                ,"tag":this.tag}).then((res)=>{
                    if(res.data.code != 0){
                        ElMessage.error(res.data.code, res.data.message)
                    }else{
                        this.queryResult = res.data.data
                        console.log(this.queryResult)
                        for(let i = 0; i < this.queryResult.length; i++){
                            this.queryResult[i].orderList = ""
                            if(this.queryResult[i].order == null){
                                continue
                            }
                            for(let j = 0;j < this.queryResult[i].order.length;j++){
                                this.queryResult[i].orderList += new Date(this.queryResult[i].order[j].start).format("hh:mm:ss")
                                + "-" +
                                new Date(this.queryResult[i].order[j].end).format("hh:mm:ss") + " "
                            }

                        }         
                    }
                })
            }else{
                axios.post("/lab/queryByLabIdAndDate",{"date":new Date(this.queryDate.getFullYear() + "-" + (this.queryDate.getMonth()+1) + "-" + 
                this.queryDate.getDate() + " " + "00:00:00"),"lab_id":parseInt(this.lab_id)}).then((res)=>{
                    if(res.data.code != 0){
                        ElMessage.error(res.data.code, res.data.message)
                    }else{
                        console.log(res.data)
                        this.queryResult = [res.data.data]
                        for(let i = 0; i < this.queryResult.length; i++){
                            this.queryResult[i].orderList = ""
                            if(this.queryResult[i].order == null){
                                continue
                            }
                            for(let j = 0;j < this.queryResult[i].order.length;j++){
                                this.queryResult[i].orderList += new Date(this.queryResult[i].order[j].start).format("hh:mm:ss")
                                + "-" +
                                new Date(this.queryResult[i].order[j].end).format("hh:mm:ss") + " "
                            }

                        }     
                    }
                })
            }
        }

    },
    mounted(){
        axios.post("/lab/queryTags").then((res)=>{
            if(res.data.code == 0){
                this.tags = res.data.data
                this.tag = this.tags[0]["tag"]
            }else{
                ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
            }
        })
    }
}
</script>
    
<style>
    label{
        width: 80px;
    }
    #filter-header{
        padding-top: 1%;
    }
    #filter-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 5%;
        color:aliceblue;
    }
    #lab-picker{
        font-weight: 500;
        width: 400px;
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
    }
    #time-picker{
        font-weight: 500;
        display: flex;
        flex-direction: row;
       
    }
    #result-area{
        height: 70%;
        display: flex;
        flex-direction: column;
        border: 2px solid white;
        margin: 5px;
        overflow: auto;
    }
    .message-box-background{
    position: fixed;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    z-index:-1;
    background-color:#00000075;
    box-shadow: #a4b0be88 0px 0px 5px;
}

.message-box{
    position: fixed;
    top: 50%;
    left: 50%;
    padding-bottom:5%;
    padding-left: 3%;
    padding-right: 5%;
    padding-top:3%;
    transform: translate(-50%, -50%);
    background-color:#a4b0be;
    box-shadow: #a4b0be88 0px 0px 5px;
    border-radius: 5px;
}

.message-box-selected{
    z-index:999;
}

</style>